---
breakpoint: tablet
title: Composition
path: /composition/
---

# Composition

Bumbag allows you to flexibly build your own components on top of the Bumbag components using a set of composition techniques.

## `use` prop

You can pass a component to the `use` prop on any Bumbag component. This can be useful when you want to use a different component but still want to preserve the styling.

A common case could be rendering a link as a button:

```jsx-live
<Button use="a">This is a link rendered as a button</Button>
```

You can even pass your own components to `use`:

```jsx-live
<Box use={Link} href="#">This is a link</Box>
```

## Hooks

You can also use hooks to leverage Bumbag's components. Every Bumbag component comes with a `useProps` hook.

The first and only parameter to `useProps` are the props for the component.

```function-live
function Example() {
  const buttonProps = Button.useProps({ palette: 'primary' });
  return (
    <a {...buttonProps} href="#">
      This is a link rendered as a button
    </a>
  );
}
```

## Render props

As an alternative to the `useProps` hook, every Bumbag component also accepts children as a function (render props).

```jsx-live
<Button palette="primary">
  {buttonProps =>
    <a {...buttonProps} href="#">
      This is a link rendered as a button
    </a>
  }
</Button>
```
